Perfect solution to the problem that input [type=number] cannot display non numeric characters

In the page implemented by webview on the mobile terminal, input type = "number" type input must be used where there are numbers, otherwise the triggered keyboard is a full keyboard instead of a numeric keyboard. However, another problem is that input is of type type = "number" and cannot display non-numeric characters, such as/in 12/23.

It can only be solved by other ideas, such as using input or other elements of non-number type when displaying, and dynamically modifying js to number type when triggering onfocus.

<input class="pg-page-num" type="text" name="" value="34/233" id="pageNum">
<input type="hidden" name="" value="25" id="totalPage">

<script type="text/javascript">
  var oPage = document.querySelector('#pageNum'),
    oTotal = document.querySelector('#totalPage'),
    sOldVal = '';

  oPage.addEventListener('focus', function () {
    this.type = 'number';
    sOldVal = this.value;
  }, false);

  oPage.addEventListener('blur', function () {
    var sVal = this.value;
    this.type = 'text';
    if (sVal != sOldVal) {
      this.value += '/' + oTotal.value;
    }
  }, false);
</script>